<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由</title>
	</head>
	<body>
		<div id="app">
			<!-- 2.定义路由的请求地址 
				router-link在解析之后形成a标签
				to在解析之后，形成href属性，实现页面跳转-->
				<a href = "http://www.baidu.com">123</a>
			<router-link to ="home">家</router-link>
			<router-link to = "dog">宠物</router-link>
			<!-- 一般需要在当前页面中展现新组件的内容(html)提前设定展现的位置 之后被渲染为一个div -->
			<router-view></router-view>
		</div>
		<!-- 定义home的模板 -->
		<template id= homeTem>
			<div>
				<h1>家</h1>
			</div>
		</template>
		<template id = "dogTem">
			<div>
				<h1>狗</h1>
			</div>
		</template>
		<!-- 1.导入JS,顺序导入-->
		<script src="../js/vue.js"></script>
		<script src = "../js/vue-router.js"></script>
		<script type="text/javascript">
			// 定义组件变量
			let homeCom = {
				template:"#homeTem"
			}
			let dogCom ={
				template:"#dogTem"
			}
			// 3.实现请求与路由的绑定，定义路由对象
			// routes是一个数组的结构，数组中包含对象的结构
			// path:拦截请求的路径名称
			// component:组件的名称
			const router = new VueRouter({
				routes:[
					{path:"/",redirect:"/home"},
					{path:"/home",
					component:homeCom},
					{path:"/dog",
					component:dogCom}]
			})
			// 4.将路由对象与vue实例绑定
			const app = new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
	
</html>
